<!--  单个dialog  -->
<template>
  <el-dialog
    custom-class="my-dialog"
    v-model="isDlgShow"
    :title="dialogTitle"
    :width="dialogWidth"
    :center="dialogCenter"
    @closed="dialogClosed"
  >
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- footer具名插槽 -->
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watch, toRefs } from 'vue'

const emits = defineEmits(['update:isDialogShow', 'dialogClosed'])
const props = defineProps({
  // dialog标题
  dialogTitle: {
    type: String,
    default: '新增表单'
  },
  // dialog显隐控制--双向绑定值
  isDialogShow: {
    type: Boolean,
    default: false
  },
  // 是否居中显示dialog标题与footer区域
  dialogCenter: {
    type: Boolean,
    default: false
  },
  // dialog宽度
  dialogWidth: {
    type: String,
    default: '30%'
  }
})

// const isDlgShow = ref(false) // 写法一

// 解构赋值--isDialogShow赋给isDlgShow
const { isDialogShow: isDlgShow } = toRefs(props)

// 监控父组件dialog显隐控制，更新给自身
watch(
  () => props.isDialogShow,
  val => {
    // isDlgShow.value = val
    emits('update:isDialogShow', val)
  },
  { deep: true }
)

/**
 * @description Dialog 关闭动画结束时的回调
 */
const dialogClosed = () => {
  emits('dialogClosed')
}
</script>

<style lang="scss">
.el-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}
</style>
